<template>
  <div style="position: relative">
    <div
      ref="gaugeChart"
      style="width: 100%; height: 180px; padding: 20px 0"
    ></div>
    <div class="gauge-chart-info">
      <div class="gauge-chart-info-item">
        <p>{{ data.count || 0 }}</p>
        <p class="tips" style="margin-top: 5px">总数量</p>
      </div>
      <div class="gauge-chart-info-item">
        <p>{{ data.yoyGrowthPercent || 0 }}%</p>
        <p class="tips tips-red" style="margin-top: 5px">同比</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "DashboardGauge",
  mounted() {
    this.initGauge();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        this.initGauge();
      },
      deep: true,
    },
  },
  methods: {
    initGauge() {
      this.chart = echarts.init(this.$refs.gaugeChart);
      const option = {
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "100%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#016BBF" },
                { offset: 1, color: "#05C4D3" },
              ]),
              shadowColor: "rgba(0,138,255,0.45)",
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 10,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 10,
                color: [[1, "#102550"]],
              },
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              fontSize: 20,
              offsetCenter: [0, -20],
              valueAnimation: true,
              formatter: "{value}%",
              color: "#fff",
              fontWeight: "bold",
            },
            data: [
              {
                value: this.data.percentage || 0,
                // name: "完成率",
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
      window.addEventListener("resize", () => this.chart.resize());
    },
  },
};
</script>

<style scoped lang="scss">
.gauge-chart-info {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  .gauge-chart-info-item {
    p {
      margin: 0;
      font-size: 13px;
    }
    .tips::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 12px;
      background-color: #52c41a;
      margin-right: 8px;
      border-radius: 2px;
      transform: translateY(1.4px);
      box-shadow: 0 0 4px rgba(82, 196, 26, 0.6);
    }
    .tips-red::before {
      background-color: #dc3f37;
      box-shadow: 0 0 4px rgba(220, 63, 55, 0.6);
    }
    p:first-child {
      font-size: 20px;
    }
  }
}
</style>
